<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">
	<meta http-equiv="X-UA-Compatible" content="IE=edge">
	<title>SUI</title>
	<meta name="viewport" content="initial-scale=1, maximum-scale=1">
	<link rel="shortcut icon" href="/favicon.ico">
	<meta name="apple-mobile-web-app-capable" content="yes">
	<meta name="apple-mobile-web-app-status-bar-style" content="black">

	<link rel="stylesheet" href="//g.alicdn.com/msui/sm/0.6.2/css/sm.min.css">
	<link rel="stylesheet" href="//g.alicdn.com/msui/sm/0.6.2/css/sm-extend.min.css">

</head>
<body>
<header class="bar bar-nav">
    <h1 class='title'>下拉刷新</h1>
</header>
	<!-- content应该拥有"pull-to-refresh-content"类,表示启用下拉刷新 -->
	<div class="content pull-to-refresh-content" data-ptr-distance="55">
		<!-- 默认的下拉刷新层 -->
		<div class="pull-to-refresh-layer">
			<div class="preloader"></div>
			<div class="pull-to-refresh-arrow"></div>
		</div>
		<!-- 下面是正文 -->
		<div class="card-container">
			<div class="card">
				<div class="card-header">card</div>
				<div class="card-content">
					<div class="card-content-inner">
						这里是第1个card，下拉刷新会出现第2个card。
					</div>
				</div>
			</div>
		</div>
	</div>

	<script type='text/javascript' src='//g.alicdn.com/sj/lib/zepto/zepto.min.js' charset='utf-8'></script>
	<script type='text/javascript' src='//g.alicdn.com/msui/sm/0.6.2/js/sm.min.js' charset='utf-8'></script>
	<script type='text/javascript' src='//g.alicdn.com/msui/sm/0.6.2/js/sm-extend.min.js' charset='utf-8'></script>
	<script>
		// 添加'refresh'监听器
		$(document).on('refresh', '.pull-to-refresh-content',function(e) {
		    // 模拟2s的加载过程
		    setTimeout(function() {
		        var cardNumber = $(e.target).find('.card').length + 1;
		        var cardHTML = '<div class="card">' +
		                          '<div class="card-header">card'+cardNumber+'</div>' +
		                          '<div class="card-content">' +
		                            '<div class="card-content-inner">' +
		                                '这里是第' + cardNumber + '个card，下拉刷新会出现第' + (cardNumber + 1) + '个card。' +
		                            '</div>' +
		                          '</div>' +
		                      '</div>';

		        $(e.target).find('.card-container').prepend(cardHTML);
		        // 加载完毕需要重置
		        $.pullToRefreshDone('.pull-to-refresh-content');
		    }, 2000);
		});
	</script>
</body>
</html>